import searchElement from '../../components/search'
import tableElement from '../../components/table'
import tabElement from '../../components/tab'
import config from '../../api/config'
let url = 'http://welfare.llf360.com';
export default {
    data() {
        return {
            msg: 'hello this is index',
            activeNames: ['1'],
            tableData: {
                label: [
                    { name: '项目名称', msgname: 'pi_name' },
                    { name: '项目视频地址', msgname: 'pi_video_url' },
                    { name: '项目描述', msgname: 'pi_details' },
                    {
                        name: '项目上架状态', msgname: 'pi_is_up', filter: function (val) {
                            return ['下架', '上架'][val]
                        }
                    },
                    // { name: '项目开始时间', msgname: 'pi_begin_time' },
                    // { name: '项目结束时间', msgname: 'pi_end_time' },
                    {
                        name: '项目状态', msgname: 'pi_status', filter: function (val) {
                            return ['已结束', '进行中'][val]
                        }
                    },
                    { name: '目标金额', msgname: 'pi_target_amount' },
                    { name: '当前筹集金额', msgname: 'pi_current_amount' },
                    { name: '捐款次数', msgname: 'pi_total_num' },
                ],
                data: [],
                opate: [
                    { name: '修改', opatename: 'edit' },
                    { name: '反馈管理', opatename: 'itemfeedback' },
                ],
                all: 'pi_id'
            },
            img: false,
            dialogFormVisible: false,
            formLabelWidth: '150px',
            form: {
                pi_name: '',
                pi_details: '',
                pi_target_amount: '',
                pi_is_up: '',
                pi_status: '',
                pi_video_url: `${url}/static/image/load.png`,
                pi_intro: '',
                pi_hot_sort: '',
                pi_banner: [`${url}/static/image/basebanner.png`]
            },
            formtitle: '新增捐赠项目',
            rules: {
                pi_name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ],
                pi_details: [
                    { required: true, message: '请填写详情', trigger: 'blur' }
                ],
                pi_target_amount: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ],
                pi_intro: [
                    { required: true, message: '请填写项目介绍', trigger: 'blur' }
                ],
                pi_hot_sort: [
                    { type: 'number', required: true, message: '请填写热度排行', trigger: 'blur' },
                ],
                pi_is_up: [
                    { required: true, message: '请选择上架状态', trigger: 'change' },
                ],
                pi_status: [
                    { required: true, message: '请选择项目状态', trigger: 'change' },
                ]
            },
            delVal: [],
            pageTotal: 0,
            page: {
                page: 1,
                page_limit: 10
            },
            pageSizes: [],
            searchData: {
                name: '',
                status: '',
                start_target_amount: '',
                end_target_amount: ''
            }

        }
    },
    methods: {
        __msg(data) {
            this.$alert('用户信息有误，请重新登陆', data, {
                confirmButtonText: '确定',
                callback: action => {
                    this.$router.push({ path: '/login' });
                }
            });
        },
        __error(data) {
            switch (data) {
                case 401:
                    this.__msg(data);
                    break;
                case -404:
                    this.tableData.data = [];
                    this.pageTotal = 0;
                    break;
                default:
                    break;
            }
        },
        handleSizeChange(size) {
            this.page.page_limit = size;
            this.getList(this.page)
        },
        changePage(page) {
            this.page.page = page;
            this.getList(this.page)
        },
        acquire(data) {
            if (data.opate == 'edit') {
                this.edit(data.data)
            } else if (data.opate == 'msg') {
                this.delVal = data.data
            } else if (data.opate == 'itemfeedback') {
                this.$router.push({ path: `/index/donate_manage/${data.data.pi_id}` })
            }
        },
        // 新增
        add() {
            this.formtitle = '新增捐赠项目';
            this.dialogFormVisible = true;
            this.form = {
                pi_name: '',
                pi_details: '',
                pi_target_amount: '',
                pi_is_up: '',
                pi_status: '',
                pi_video_url: `${url}/static/image/load.png`,
                pi_intro: '',
                pi_hot_sort: '',
                pi_banner: [`${url}/static/image/basebanner.png`]
            }
        },
        // 提交
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (!this.form.pi_video_url) {
                        this.form.pi_video_url = ''
                    }
                    if (this.form.pi_banner.length < 1) {
                        this.form.pi_banner = ['']
                    }
                    this.form.pi_banner = JSON.stringify(this.form.pi_banner);
                    if (this.formtitle == '新增捐赠项目') {
                        config.__donate.add(this.form).then((req) => {
                            if (req.data.code === 0) {
                                this.$message('添加成功');
                                this.getList({ page: 1 })
                            }
                            this.$refs[formName].resetFields();
                            this.dialogFormVisible = false;
                        }).catch((error) => {
                            console.log(error.req)
                            this.__error(error.response.status);
                        })
                    } else {
                        config.__donate.edit(this.form).then((req) => {
                            if (req.data.code === 0) {
                                this.$message('修改成功');
                                this.getList({ page: 1 })
                            }
                            this.dialogFormVisible = false;
                        }).catch((error) => {
                            console.log(error.req)
                            this.__error(error.response.status);
                        })
                    }


                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 取消
        cancel(formName) {
            this.$refs[formName].resetFields();
            this.dialogFormVisible = false;
            if (this.formtitle == '新增捐赠项目') {
                this.img = false;
                this.form.video_url = ''
            }

        },
        // 编辑
        edit(data) {
            this.formtitle = '编辑捐赠项目';
            Object.assign(this.form, data);
            this.form.pi_is_up = this.form.pi_is_up.toString();
            this.form.pi_status = this.form.pi_status.toString();
            this.form.pi_banner = this.form.pi_banner ? JSON.parse(this.form.pi_banner) : [];
            this.dialogFormVisible = true;
        },
        // 删除
        del(item) {
            let val = this.delVal.toString();
            let data = {
                id: val
            }
            config.__donate.del(data).then((req) => {
                if (req.data.code === 0) {
                    this.$message(req.data.data);
                    this.getList({ page: 1 })
                }
            }).catch((error) => {
                console.log(error.req)
                this.__error(error.response.status);
            })
        },
        // 删除图片
        delImg(index) {
            if (index === -1) {
                this.form.pi_video_url = '';
            } else {
                this.form.pi_banner.splice(index, 1);
            }
        },
        //上传
        uploadContent(pic, num) {
            var reader = new FileReader();
            var imgUrl = ''
            const that = this
            reader.onload = function (e) {
                var video = e.target.result;
                var data = {
                    video: video
                }
                config.__donate.upload(data).then((req) => {
                    if (req.data.code === 0) {
                        if (num == 1) {
                            that.form.pi_video_url = req.data.data.imgUrl
                        } else {
                            that.form.pi_banner.push(req.data.data.imgUrl)
                        }
                    }
                }).catch((error) => {
                    console.log(error.req)
                    this.__error(error.response.status);
                })
            };
            reader.readAsDataURL(pic);


        },
        uploadImg(num) {

            var pic = num == 1 ? this.$refs.pic1.files[0] : this.$refs.pic2.files[0]
            console.log(pic)
            if (pic) this.uploadContent(pic, num)
        },
        // 查询
        onSubmit() {
            // this.searchData.page = this.page.page;
            this.getList(this.searchData);
        },
        // 获取列表
        getList(data) {
            config.__donate.List(data).then((req) => {
                if (req.data.code === 0) {
                    this.tableData.data = req.data.data.data;
                    this.pageTotal = req.data.data.total;
                    let num = Math.ceil(parseInt(this.pageTotal, 10) / 10);
                    if (this.pageSizes.length < 1) {
                        for (var index = 0; index < num; index++) {
                            this.pageSizes.push((index + 1) * 10)
                        }
                    }

                } else {
                    this.__error(req.data.code);
                }
            }).catch((error) => {
                console.log(error.req)
                this.__error(error.response.status);
            })
        }
    },
    components: { searchElement, tableElement, tabElement },
    mounted() {
        this.$nextTick(function () {
            let data = {
                page: 1,
                page_limit: 10
            }
            this.getList(data)
        })
    }
}